import React from "react";
import { Form, Input, Button, DatePicker, Select, Row, Col } from "antd";

const { RangePicker } = DatePicker;
const { Option } = Select;

@Form.create()
class AdvancedFilter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showBan: false};
  }

  componentDidMount() {
    const { getRef } = this.props;
    if (getRef) getRef(this);
  }

  handleReset = () => {
    const { form, handleParamsChange } = this.props;
    form.resetFields();
    handleParamsChange({ key: "", timeStart: "", timeEnd: "",searchKey:"" });
    // handleSearch();
  };

  handleSubmit = e => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, handleParamsChange, handleSearch } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const { datatime, searchKey, category } = values;
      const param = { searchKey, category ,lastVersion:1};
      if (datatime && datatime.length > 0) {
        param.timeStart = datatime[0].format("YYYY-MM-DD HH:mm:ss");
        param.timeEnd = datatime[1].format("YYYY-MM-DD HH:mm:ss");
      } else {
        param.timeStart = "";
        param.timeEnd = "";
      }
      handleParamsChange(param);
      handleSearch();
    });
  };

  onRangeChange = (dates, dateStrings) => {
    const { handleParamsChange } = this.props;
    const param = { timeStart: dateStrings[0], timeEnd: dateStrings[1] };
    handleParamsChange(param);
  };

  onInputChage = e => {
    const { handleParamsChange } = this.props;
    handleParamsChange({ searchKey: e.target.value });
  };
  
  // 展示所有线上版本 
  handOnline = () => {
    // console.log('展示所有线上版本')
    const param = { lastVersion :0,category:'RUNNING'  };
    const {  handleParamsChange, handleSearch } = this.props;
    handleParamsChange(param)
    handleSearch()
    this.setState({showBan : true})
  }

  // 展示所有展示版本
  handAll =() =>{
    // console.log('展示所有展示版本')
    const param = { lastVersion :0};
    const {  handleParamsChange, handleSearch } = this.props;
    handleParamsChange(param)
    handleSearch()
    this.setState({showBan : false})
  }

  render() {
    const { form, visible } = this.props;
   
    const { getFieldDecorator } = form;
    const {showBan} = this.state
    return (
      <div className={`filter__box ${!visible ? "box__hidden" : ""}`}>
        <Form layout="inline">
          <div className="filter_form_box">
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  label="关键字"
                  // {...formItemLayout1}
                >
                  {getFieldDecorator("searchKey", {
                    initialValue: "",
                  })(
                    <Input
                      className="input__search"
                      placeholder="请输入流程模型名称或流程模型编码"
                      // style={{ minWidth: 225 }}
                      onChange={this.onInputChage}
                    />,
                  )}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="创建时间"
                  // {...formItemLayout1}
                >
                  {getFieldDecorator("datatime", {
                    initialValue: "",
                  })(
                    <RangePicker
                      format="YYYY-MM-DD HH:mm:ss"
                      // className='input__search'
                      onChange={this.onRangeChange}
                      placeholder={["开始时间", "结束时间"]}
                      showTime
                      style={{ maxWidth: 300 }}
                    />,
                  )}
                </Form.Item>
              </Col>
            </Row>
          </div>
          <Row gutter={24}>
            <Col span={16}>
              <Form.Item label="最新版本状态">
                {getFieldDecorator(
                  "category",
                  {},
                )(
                  <Select
                    placeholder="请选择版本状态"
                    style={{ minWidth: 225 }}
                  >
                    <Option value="RUNNING">在线</Option>
                    <Option value="HISTORY">停用</Option>
                    <Option value="DESIGN">未发布</Option>
                  </Select>,
                )}
              </Form.Item>
            </Col>
            <Col span={8}>
              <div className="filter_buttons" style={{ marginTop: "5px" }}>
                {!showBan ? (
                  <Button type="primary" size="small" onClick={this.handOnline} style={{ marginRight: 16 }}>
                    展示所有线上版本
                  </Button>
                ) 
                  : (
                    <Button type="primary" size="small" onClick={this.handAll} style={{ marginRight: 16 }}>
                      展示所有展示版本
                    </Button>
                )}
                <Button type="primary" size="small" onClick={this.handleSubmit}>
                  查询
                </Button>
                <Button size="small" onClick={this.handleReset}>
                  重置
                </Button>
              </div>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}
export default AdvancedFilter;
